
<h1>引入图片</h1>
<img [src]="imgSrc" alt="background">

<hr>
<h1>循环遍历数组，获取下标(Key)</h1>


<ul>
    <li *ngFor="let item of news let Key=index">
    name：{{item.newName}}   Key(下标)：{{Key}}
</li>
</ul>

<hr>

<h1>条件判断语句  *ngIf</h1>

<div *ngIf="judge">
    <img [src]="imgSrc" alt="background">
</div>
<div *ngIf="!judge">
    <img src="assets/images/pg11.png" alt="background">
</div>


<ul>
    <li *ngFor="let item of news; let Key=index;">
        <span *ngIf="Key==1" class="red">name：{{item.newName}}   Key(下标)：{{Key}} </span>
        <span *ngIf="Key!=1" class="green">name：{{item.newName}}   Key(下标)：{{Key}}</span>
    
</li>
</ul>

<hr>
<h1>条件判断语句  *ngSwitch</h1>

<span [ngSwitch]="caseNumber">
<p *ngSwitchCase="1">
    樊烨
</p>
<p *ngSwitchCase="2">
    甘陈浩
</p>
<p *ngSwitchCase="3">
    陈城
</p>
<p *ngSwitchCase="4">
    秦雨田
</p>
<p *ngSwitchCase="5">
    陈兴豪
</p>
<p *ngSwitchDefault>

</p>
</span>

<hr>

<h1>属性[ngClass]、[ngStyle]</h1>

<div [ngClass]="{'red': true}">
    ngClass演示 (尽量不要用dom来改变class)
</div>
<hr>
<strong>循环数组，让数组的双数为红色，单数为绿色</strong>
<ul>
    <li *ngFor="let item of news let Key=index" [ngClass]="{'red': Key%2==0,'green': Key%2!=0}">
        name：{{item.newName}}   Key(下标)：{{Key}}
    </li>
</ul>

<hr>

<h1>管道(Date)</h1>
<div>{{today | date:'yyyy-MM-dd HH:mm:ss'}}</div>

<hr>
<h1>事件</h1>


<strong>当前数据：{{username}}</strong>
<br>
<br>
<button (click)="run()">执行方法</button>
<button (click)="getData()">获取数据</button>
<button (click)="updateData()">改变数据</button>

<h1>双向数据绑定----MVVM 只是针对表单</h1>
    <input type="text"  [(ngModel)]="keyWords" >
    {{keyWords}}
<br>
    <button (click)="updateKeyWords()">改变keyWords的值</button>
    <button (click)="getKeyWords()">获取keyWords的值</button>

    